<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>svg</title>
    <style>
      .chart-container {
        background-color: rgba(128, 128, 128, 0.5);
      }
    </style>
  </head>
  <body>
    <svg width="800" height="400" class="chart-container">
      <!-- 画线 -->
      <!-- <line x1="100" y1="100" x2="200" y2="200" stroke="#000" /> -->
      <!-- 画圆 -->
      <!-- <circle cx="350" cy="250" r="50" fill="green" /> -->
      <circle cx="350" cy="250" r="50" fill-opacity="0" stroke="#000" />
      <!-- 画矩形 -->
      <rect
        x="400"
        y="100"
        width="100"
        height="100"
        fill-opacity="0"
        stroke="#000"
      />
      <!-- 画路径 -->
      <!-- <polyline
        points="
          100 100,
          200 200,
          300 100,
        "
        fill-opacity="0"
        stroke="#000"
      /> -->
      <!-- 画多边形 -->
      <polygon
        points="
          100 100,
          200 200,
          300 100,
        "
        fill-opacity="0"
        stroke="#000"
      />

      <path
        d="
          M 600 200
          L 700 200
          L 625 300
          L 650 160
          L 675 300
          Z
        "
        fill-opacity="0"
        stroke="#000"
      />
    </svg>

    <svg
      viewBox="0 0 1024 1024"
      width="16"
      height="16"
    >
      <path
        d="M518.4 149.290667c112.597333-80.789333 267.882667-69.397333 368.128 32 53.866667 54.528 84.138667 128.853333 84.138667 206.378666 0 77.525333-30.293333 151.850667-84.096 206.336l-294.421334 299.52a110.976 110.976 0 0 1-80.213333 34.474667 110.72 110.72 0 0 1-79.914667-34.176L137.322667 593.770667C83.562667 539.242667 53.333333 464.981333 53.333333 387.541333s30.229333-151.722667 84.010667-206.272c100.224-101.376 255.530667-112.768 368.128-31.978666l6.442667 4.778666 6.485333-4.778666z m322.602667 76.970666c-84.629333-85.589333-219.157333-88.64-307.328-6.954666l-21.76 20.138666-21.717334-20.138666c-88.192-81.685333-222.72-78.634667-307.306666 6.933333-41.92 42.496-65.557333 100.608-65.557334 161.28 0 60.693333 23.637333 118.805333 65.6 161.344l295.04 300.416c9.045333 9.450667 21.269333 14.72 33.962667 14.72 12.693333 0 24.917333-5.269333 34.261333-15.04L840.96 549.077333c42.005333-42.496 65.685333-100.650667 65.685333-161.408 0-60.736-23.68-118.912-65.664-161.408z"
        fill="#d81e06"
      ></path>
    </svg>
  </body>
</html>
